<template>
  <div class="top">
      <div class="top2">
          <div class="label">
              <i :style="img"></i>
              搜索目的地
          </div>
      </div>
     <div class="banner">
          <img src="img/focus.jpg" alt="">
          <div class="title">
              <p>神仙海岛的三款热门玩法，去普吉一定不能错过
                  <span :style="img1"></span>
              </p>
          </div>
     </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            img:{backgroundImage: "url(" + require("sta/search.png") + ")"},
            img1:{backgroundImage: "url(" + require("sta/index.png") + ")"}
        }
    }
}
</script>

<style scoped>
    .top2{
        background-color: #f2f2f2;
        border-radius: 2px;
        height: .42667rem;
        padding: .16rem;
        margin: 0 .4rem;
        position: relative;
    }
    .label{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        text-align: center;
        font-size: .32rem;
        color: #696969;
        line-height: .74667rem;
    }
    .label i{
        width: .34667rem;
        height: .37333rem;
        display: inline-block;
        background: url(/img/search.png) no-repeat;
        background-size: .34667rem;
        background-position: 0 0;
        vertical-align: middle;
    }
    img{
        width: 100%;
        margin-top: 0.2667rem;
    }
    .banner{
        position: relative;
    }
    .title{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: -webkit-linear-gradient(top,transparent,rgba(0,0,0,0.6));
    }
    .title p{
        padding: .4rem 1.06667rem .4rem .4rem;
        line-height: .66667rem;
        font-size: .44rem;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    p span{
        display: block;
        width: .32rem;
        height: .53333rem;
        background-position: 0 0;
        position: absolute;
        bottom: .45333rem;
        right: .42667rem;
        background: url(/img/index.png) no-repeat;
        background-size: 2rem;
    }
</style>